<template>
    <div style="min-width: 809px">
        <div v-if="$route.path == '/followUp'">
            <div class="vs-search-box">
                <div class="vs-table-box">
                    <el-form ref="form" :inline="true" v-search-box-enter :model="paging" label-width="110px">
                        <el-form-item label="">
                            <div style="width: 400px">
                                <el-input placeholder="请输入姓名或手机号或会员卡号" v-model="paging.keys">
                                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                                    <template slot="append">
                                        <div style="cursor: pointer" @click="search()">
                                            查找会员
                                        </div>
                                    </template>
                                </el-input>
                            </div>
                        </el-form-item>
                        <el-form-item label="查询时间段：" style="margin-left: 20px">
                            <el-date-picker v-model="paging.bill_time_start" type="daterange" format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd" start-placeholder="开始时间" end-placeholder="结束时间"
                                style="width: 300px">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item class="">
                            <el-button @click="reset">重置</el-button>
                            <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div>
                    <el-button type="primary" @click="visit()">跟进回访</el-button>
                    <el-button v-if="utils.getIsShopowner()" icon="el-icon-download" type="primary"
                        @click="exportFile()">导出</el-button>
                </div>
            </div>
            <div class="vs-search-box">
                <el-table border ref="tableData" v-loading="loading" :data="tableData" style="width: 100%"
                    @sort-change="sortChange">
                    <el-table-column type="selection"> </el-table-column>
                    <el-table-column label="会员卡号">
                        <template slot-scope="scope">
                            <div>
                                {{ scope.row.user.vip_no || "" }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="姓名">
                        <template slot-scope="scope">
                            <div>
                                {{ scope.row.user.realname }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="性别" width="55px">
                        <template slot-scope="scope">
                            <div>
                                {{ scope.row.user.gender == 1 ? "男" : "女" }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="手机号" width="110">
                        <template slot-scope="scope">
                            <div>
                                {{ scope.row.user.phone }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="最后消费日期" sortable prop="pay_time" width="160">
                        <template slot-scope="scope">
                            <div>
                                {{ scope.row.pay_time }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="未到店天数" sortable prop="pay_day">
                    </el-table-column>
                    <el-table-column label="回访日期" sortable prop="date">
                        <template slot-scope="scope">
                            <div>
                                {{ scope.row.date }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" width="230" label="操作" align="center">
                        <template slot-scope="scope">
                            <span @click="ntVisit(scope.row, 3)" class="tab-table-text">修改回访时间</span>
                            <span @click="ntVisit(scope.row, 2)" class="tab-red-text">删除</span>
                            <span @click="ntVisit(scope.row)" class="tab-table-text">详情</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="vs-paging-box">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page.sync="paging.page" :page-size="paging.limit"
                        layout="total, sizes, prev, pager, next, jumper" :total="paging.total"
                        :page-sizes="[100, 200, 500, 1000]">
                    </el-pagination>
                </div>
            </div>
        </div>
        <router-view></router-view>
        <el-dialog title="跟进" :visible.sync="dialogVisible" width="400px" :before-close="dialogBeforeClose">
            <div class="dialog_body">
                <el-input type="textarea" v-model="desc" placeholder="请输入跟进记录"></el-input>
                <div>
                    下一次跟进提醒
                    <el-date-picker v-model="timer" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"
                        style="margin-left: 25px">
                    </el-date-picker>
                </div>
            </div>
            <div slot="footer" style="margin-top: 20px">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="rtVisit()">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="会员跟进提醒" :visible.sync="dialogVisible2" width="400px" :before-close="dialogBeforeClose2">
            <div class="dialog_body2">
                <div>
                    <div>姓名：{{ visitInfo.user.realname || "" }}</div>

                    <div>手机号：{{ visitInfo.user.phone }}</div>
                </div>
                <!-- <div>上次跟进时间：{{ "没有这个字段" }}</div> -->
                <div>跟进内容：{{ visitInfo.content }}</div>
                <div>提醒时间设置为：{{ visitInfo.date }}</div>
            </div>
            <div style="margin: 20px 0; display: flex; justify-content: center">
                <el-button @click="disVisit">取 消</el-button>
                <el-button type="primary" @click="ntVisit(visitInfo.user.id)" style="margin-left: 30px">去跟进</el-button>
            </div>
        </el-dialog>
</div>
</template>

<script>


















export default {
    data() {
        return {
            desc: "",
            form: {
                bill_time_start: "",
                keys: "",
            },
            paging: {
                page: 1,
                limit: 100,
                total: 0,
                bill_time_start: "",
                keys: "",
                date_start: "",
                date_end: "",
                order: "",
            },
            timer: "",
            dialogVisible: false,
            dialogVisible2: false,
            updateDate: "",
            visitInfo: {
                user: {
                    realname: "",
                    phone: "",
                },
                content: "",
                date: "",
            },
            visitList: [],
            tableData: [],
        };
    },
    created() {
        this.getList();
        this.getVisitTask();
    },
    filters: {},
    methods: {
        sortChange(column) {
            if (column.order == "ascending") {
                this.paging.order = column.prop + "asc";
            } else if (column.order == "descending") {
                this.paging.order = column.prop + "desc";
            } else {
                this.paging.order = "";
            }
            this.getList()
            console.log(column);
            // this.form.sort = column.prop
            // this.form.sort_type = column.order == 'ascending' ? 'up' : 'down'
            // this.getHouseList()
        },
        //去跟进
        ntVisit(row, type) {
            if (type == 3) {
                const h = this.$createElement;
                this.updateDate = row.date;
                setTimeout(() => {
                    document.getElementById("updateDatePicker").value = row.date;
                }, 100);
                console.log(this.updateDate, 'this.updateDate');
                this.$msgbox({
                    title: '修改下次回访时间',
                    message: h("div", null, [h('el-date-picker', {
                        attrs: {
                            'value-format': "yyyy-MM-dd",
                            type: "date",
                            id: 'updateDatePicker',
                            placeholder: "选择日期",
                        },
                        style: 'width: 100%',
                        on: {
                            input: (e) => {
                                this.updateDate = e;
                                document.getElementById("updateDatePicker").value = e;
                            }
                        }
                    })]),
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    beforeClose: async (action, instance, done, value) => {
                        if (!this.updateDate) return this.$message.warning("请选择日期")
                        if (action === 'confirm') {
                            instance.confirmButtonLoading = true;
                            instance.confirmButtonText = '执行中...';
                            let obj = Object.assign({}, row);
                            obj.date = this.updateDate;
                            let { code } = await this.$Http.editVisit(obj);
                            if (code) {
                                this.$message.success("修改成功!");
                                this.handleCurrentChange(1)
                                done();
                            }
                            setTimeout(() => {
                                instance.confirmButtonLoading = false;
                            }, 300);
                        } else {
                            done();
                        }
                    }
                }).then(action => {

                });
                return;
            } else if (type == 2) {
                this.$confirm('此操作将永久删除该回访信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    beforeClose: async (action, instance, done) => {
                        if (action === 'confirm') {
                            instance.confirmButtonLoading = true;
                            instance.confirmButtonText = '执行中...';
                            let { code, data } = await this.$Http.deleteVisit({ id: row.id })
                            if (code) {
                                this.$message.success('删除成功!');
                                this.handleCurrentChange(1)
                            }
                            done();
                            instance.confirmButtonLoading = false;
                        } else {
                            done();
                        }
                    }
                }).then(() => {
                }).catch(() => {
                });
                return;
            }
            //跳转到会员信息
            this.utils.goUrl(`/memberInfo?id=${row.user_id}`);
        },
        //跟进回访
        visit() {
            if (!this.$refs.tableData.selection.length) {
                return this.$message.warning("请选择您要跟进的会员");
            }
            this.dialogVisible = true;
        },
        //取消回访
        async disVisit() {
            let { code, data } = await this.$Http.setFlowStatus({
                id: this.visitInfo.id,
            });
            console.log(data);
            if (code === 10000) {
                this.dialogVisible2 = false;
                this.getVisitTask();
            }
        },
        //获取今天待回访的 提醒
        async getVisitTask() {
            let { code, data } = await this.$Http.getVisitTask();
            if (code === 10000) {
                if (data.length) {
                    this.visitList = data;
                    this.visitInfo = data[0];
                    this.dialogVisible2 = true;
                }
            }
        },
        reset() {
            //重置
            this.paging = this.$options.data().paging;
            this.handleCurrentChange(1);
        },
        //搜索
        search() {
            this.getList();
        },
        //跟进回访
        async rtVisit() {
            let arr = [];
            this.$refs.tableData.selection.forEach((e) => {
                arr.push(e.user_id);
            });
            let { code, data } = await this.$Http.setVisit({
                ids: arr.join(","),
                content: this.desc,
                date: this.timer,
            });
            if (code === 10000) {
                this.$message.success("新增回访成功");
                this.dialogVisible = false;
                this.desc = "";
                this.timer = "";
                this.getList();
            }
        },
        //导出文件
        async exportFile() {
            if (!this.$refs.tableData.selection.length) {
                return this.$message.warning("请选择您要导出的会员");
            }
            let arr = [];
            this.$refs.tableData.selection.forEach((e) => {
                arr.push(e.id);
            });
            this.utils.exportFile(
                "store/user/exportVisit",
                "跟进回访列表",
                arr.join(",")
            );
        },
        //列表
        async getList() {
            if (this.paging.bill_time_start) {
                this.paging.date_start = this.paging.bill_time_start[0];
                this.paging.date_end = this.paging.bill_time_start[1];
            }
            this.loading = true;
            let { code, data } = await this.$Http.getVisitOne(this.paging);
            this.loading = false;
            if (code) {
                this.tableData = data.data;
                this.paging.total = data.total;
            }
        },
        dialogBeforeClose() {
            this.dialogVisible = false;
        },
        dialogBeforeClose2() {
            this.dialogVisible2 = false;
        },
        handleSizeChange(val) {
            this.paging.limit = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.paging.page = val;
            this.getList();
        },
    },
};
</script>

<style lang="scss" scoped>
::v-deep {
    .el-dialog__body {
        padding: 10px 20px;
        border-top: 1px solid rgba($color: #000000, $alpha: 0.2);
    }
}

.image-thumbnail {
    width: 130px;
    height: 130px;
}

.vs-table-box {
    display: flex;
}

.dialog_body {
    display: flex;
    flex-direction: column;
    text-align: left;

    >div:first-child {
        margin: 20px 0;
        display: flex;
        align-items: center;
    }
}

.dialog_body2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 16px;

    >div:first-child {
        display: flex;
        align-items: center;

        >div:last-child {
            margin-left: 20px;
        }
    }

    >div {
        margin: 5px 0;
    }
}
</style>
